<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>正在热映</li>
        <li>即将上映</li>
    </ul>

    <div id="container"></div>




</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>

<script>
    let page = 1;
    let total = 0;
    let totalPage = 0;

    function getMovieList(page = 1, pageSize = 2) {
        // let url = `http://local.proxy.com/api/v1/maizuo/lst?pageNum=${page}&pageSize=${pageSize}&type=2&k=6875894`;
        let url = `http://local.px.com/gateway/v5/?cityId=440100&pageNum=1&pageSize=10&type=1&k=3700081#/city`;

        // 发送网络请求
        axios({
            url: url,
            method: 'get',
            headers: {
                "X-Client-Info": `{"a":"3000","ch":"1002","v":"5.2.0","e":"1649762647632811891458049"}`,
                "X-Host": `mall.film-ticket.film.list`,
            }
        }).then(function (res) {
            console.log(res);
            // 解构
            let { data: { data: { films } } } = res;
            total = res.data.data.total;

            // 总页数
            totalPage = Math.ceil(total / totalPage);
            console.log(films);
            let html = "";
            // 添加内容到页面中
            for (let item of films) {
                html += `<ul>
                    <li>序号：${item.filmId}</li>
                    <li>名称：${item.name}</li>
                    <li>导演：${item.director}</li>
                    <li>封面：<a href="/detail?filmId=${item.filmId}">
                        <img  width="100" src="${item.poster}">
                        </a>  </li>
                </ul>`;
            }
            $("#container").append(html);
        })
    }
    getMovieList();
</script>

</html>